<template>
  <div class="about">
      <div class="top">
            <div class="head clear" style="display: flex;
  justify-content:space-between;
  flex-wrap:wrap;">
                <div class="div clear" style="display:flex;align-items:center;" @click="rturn()">
                <img src="../../assets/image/返回白@2x.png" alt="" class="percen">
                <span class="sapn1" style="color:#fff;font-size:15px;">返回</span>
            </div>
                <div class="div clear" style="margin-top:12px;">

                </div>
                <div class="div clear"><span>  </span></div>
            </div>
            <div class="main clear">
                <div class="img" v-if="xou.PHOTO !== '' && xou.PHOTO !== undefined && xou.PHOTO !== null">
                    <img :src="xou.PHOTO" alt="">
                </div>
                <div class="img" v-else-if="xou.sex===1">
                    <img src="../../assets/image/男大@2x.png" alt="">
                </div>
                <div class="img" v-else-if="xou.sex===2">
                    <img src="../../assets/image/女大@2x.png" alt="">
                </div>
                <div class="font clear">
                    <p>
                    <span>{{xou.name}}</span>
                    <span style="margin-left:5px;margin-right:5px;">|</span>
                    <span v-if="xou.sex===1">男</span>
                    <span v-else-if="xou.sex===2">女</span>
                    <span style="margin-left:5px;margin-right:5px;">|</span>

                    <span>{{xou.age}}岁</span>
<!--                    <span>{{god[xou.hunyinzhuangtai]}}</span>
                    <span>{{wenhuachengdu[xou.wenhuachengdu]}}</span>-->
                    </p>
                    <p>{{xou.phone}}</p>
                    <p>{{xou.zuizhongAddress}}</p>

                </div>
            </div>
            <!-- <div class="head clear">
                <img src="../assets/image/地址白@2x.png" alt="">
                <p>{{xou.homeaddress}}</p>
            </div><div class="head clear">
                <img src="../assets/image/电话白@2x.png" alt="">
                <p>{{xou.phone}}</p>
            </div> -->
      </div>
      <div class="show">
          <div class="div1 clear" @click="diao()">
              <div class="one" style="margin-right:15px;">
                  <img src="../../assets/image/调查表@2x.png" alt="">
              </div>
              <div class="one" style="line-height:75px;font-size: 15px;font-family: PingFang SC;font-weight: bold;color: #333333;">
                  <span>残疾人基本信息</span>
              </div>
              <div class="one ww">
                  <img src="../../assets/image/更多灰@2x.png" alt="">
              </div>
          </div>
          <div class="div1 clear" @click="xunlian()" >
              <div class="one" style="margin-right:15px;">
                  <img src="../../assets/image/调查表@2x.png" alt="">
              </div>
              <div class="one" style="line-height:75px;font-size: 15px;font-family: PingFang SC;font-weight: bold;color: #333333;">
                  <span>康复训练登记</span>
              </div>
              <div class="one ww">
                  <img src="../../assets/image/更多灰@2x.png" alt="">
              </div>
          </div>
          <div class="div1 clear" @click="diao1()" >
              <div class="one" style="margin-right:15px;">
                  <img src="../../assets/image/记录@2x.png" alt="">
              </div>
              <div class="one" style="line-height:75px;font-size: 15px;font-family: PingFang SC;font-weight: bold;color: #333333;">
                  <span>康复服务记录</span>
              </div>
              <div class="one pp">
                  <img src="../../assets/image/添加@2x.png" alt="">
              </div>
          </div>
<!--        <div class="div1 clear" @click="diao2()">
              <div class="one" style="margin-right:15px;">
                  <img src="../assets/image/评估@2x.png" alt="">
              </div>
              <div class="one" style="line-height:75px;font-size: 15px;font-family: PingFang SC;font-weight: bold;color: #333333;">
                  <span>康复训练评估</span>
              </div>
              <div class="one pp">
                  <img src="../assets/image/添加@2x.png" alt="">
              </div>
          </div>-->
        <div class="div1 clear" @click="diao3()" >
              <div class="one" style="margin-right:15px;">
                  <img src="../../assets/image/评价@2x.png" alt="">
              </div>
              <div class="one" style="line-height:75px;font-size: 15px;font-family: PingFang SC;font-weight: bold;color: #333333;">
                  <span>康复服务评价</span>
              </div>
              <div class="one pp">
                  <img src="../../assets/image/添加@2x.png" alt="">
              </div>
          </div>
      </div>
  </div>
</template>
<script>
import {healthFormationpeople} from '../../apiCanJi/apiCanji'
import pinggu from '../cs/peizhihttp'
import { Toast } from 'vant'
export default {
  data () {
    return {
      xou: {},
      god: ['未婚', '已婚', '离异', '未婚'],
      wenhuachengdu: ['文盲', '小学', '初中', '高中', '大学', '大学以上'],
      userid: '',
      ishaveDisId: false,
      disid: '',
      gerenid: ''
    }
  },
  methods: {
    rturn () {
      var str1 = JSON.stringify({id: ''})
      localStorage.gerenid = str1
      this.$router.go(-1)
    },
    diao () {
      if (this.disid === '' || this.disid === undefined) {
        this.$router.push('newperple?userid=' + this.userid)
      } else {
        this.$router.push('suv?id=' + this.disid)
      }
    },
    xunlian () {
      if (this.ishaveDisId === true) {
        this.$router.push('xunlian')
      } else {
        Toast('请先填写残疾人基本信息')
      }
    },
    diao1 () {
      if (this.ishaveDisId === true) {
        this.$router.push('rec')
      } else {
        Toast('请先填写残疾人基本信息')
      }
    },
    diao2 () {
      location.href = pinggu.pinggu + 'userid=' + this.userid + '&type=3'
    },
    diao3 () {
      if (this.ishaveDisId === true) {
        this.$router.push('ass')
      } else {
        Toast('请先填写残疾人基本信息')
      }
    },
    show () {
      this.gerenid = JSON.parse(localStorage.gerenid).id
      this.disid = JSON.parse(localStorage.disid).id// disid
      this.userid = JSON.parse(localStorage.userid).id// userid
      healthFormationpeople({id: this.gerenid}).then(res => {
        console.log(res)
        this.xou = res
        // data_user_id: this.userid
      })
      if (this.disid === '' || this.disid === undefined) {
        this.ishaveDisId = false
      } else {
        this.ishaveDisId = true
      }
    }
  },
  mounted () {
    document.body.style.backgroundColor = '#FAF9FE'
  },
  created () {
    this.show()
    document.title = '残疾人档案管理'
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}
.about{
    background-color: #FAF9FE;
}
.top{
    width: 100%;
    /* height: 222px; */
    background: linear-gradient(90deg, #1DA3F1 0%, #1DC7F1 100%);
}
.head{
  height: 44px;
}
.head .percen{
  width: 7px;
  height: 13px;
  margin: 0px 5px 0px 15px;
}
.head .span1{
  width: 20.5px;
  height: 14.5px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  margin-right: 60px;
}
.head .div {
  float: left;
  font-size: 15px;
  font-weight: bold;
}
.head .span2{
  width: 67px;
  height: 16px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
}
.main{
    width: 92%;
    height: 120px;
    margin: 0px auto;

}
.img{
    height: 105px;
    margin-right: 15px;
    /* margin: 13.5px 12.5px 0px 15px; */
    float: left;
    display: flex;
    align-items: center;
}
.img img{
    width: 60px;
    height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.font{
    width: 255px;
    height: 105px;
    color: #fff;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    float: left;
         display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    flex-direction: column;
    justify-content: center;

}
.font span{
    /* margin-right: 10px; */
    font-size: 15px;
}
.font p{
    width: 100%;
    margin: 0px;
    word-wrap: break-word;
    word-break: normal;
    margin-bottom: 5px;
}
/* p{
    margin: 0px;
}
.font span{
    float: left;
    margin-right: 10px;
}
.head img{
    width: 14px;
    height: 16px;
    margin: 14px 10px 0px 15px;
    float: left;
}
.head p{
    width: 269.5px;
    height: 12.5px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    float: left;
    margin-top: 13px;
} */
.show{
    width: 92%;
    height: 400px;
    margin: 0px auto;

}
.div1{
    width: 100%;
    height: 75px;
    background-color: #fff;
    margin-top: 10px;
    border-radius: 10px;
}
.one{
    float: left;
}
.one img{
    width: 22px;
    height: 22px;
    margin-top: 26.5px ;
    margin-left: 20px;
}
.ww{
    float: right;
}
.ww img{
    width: 7px;
    height: 13px;
    float: right;
    margin: 31px 36px 0px 0px;
}
.pp{
    float: right;
}
.pp img{
    width: 29px;
    height: 29px;
    float: right;
    margin: 23px 25px 0px 0px;
}

</style>
